<template>
  <div id="app">
    <div class="content-container">
      <div class="image-container">
        <!--        <img src="@/assets/img/publicBrand/绘制数字农业产业园图 (1).png" alt="Image 1" class="image" />-->
        <img :src="imageUrls[0]" alt="数字农业产业园图片6" class="left-image" />
        <img :src="imageUrls[1]" alt="数字农业产业园图片5" class="left-image" />
      </div>

      <DynamicFlowEconomyComponent
          :title="'全力塑造“万里茶道第一镇”IP 文旅形象'"
          :content="[
'整合有重要影响的名人文化、茶文化、古镇文化、自然风光、美食文化、传统风俗、非遗文化、民俗文化，串联武夷山国家公园、葛仙山、鹅湖书院、民清古街等文旅资源，针对不同群体需求，推出康养旅游、避暑旅游、乡村旅游、非遗旅游、研学旅游等专项文旅线路。深入探寻万里茶道相关的历史典故、商贸传奇与民俗风情，将这些底蕴深厚的故事转化为可传播的文旅内容。开展茶文化节、茶道主题研学游、传统制茶技艺体验等文旅活动，吸引游客深度参与。利用新媒体平台，制作精美的宣传视频与图文，展示古镇魅力。邀请网红达人打卡，提升知名度，全方位塑造极具吸引力的 “万里茶道第一镇” IP 文旅形象。着力提升公共文化旅游服务水平，补齐“旅游”交通短板，以河口明清古街为核心，用风景道、旅游公交、水路航线串联交通主干线与鹅湖书院、葛仙村、武夷山等重点旅游景区。'
      ]"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import DynamicFlowEconomyComponent from "@/views/regionalPublicBrand/DynamicFlowEconomyComponent.vue";

// 定义图片URL数组
const imageUrls = [
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E7%94%9F%E6%88%90%E6%95%B0%E5%AD%97%E5%86%9C%E4%B8%9A%E4%BA%A7%E4%B8%9A%E5%9B%AD%E5%9B%BE%E7%89%87%20%286%29.png',
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E7%94%9F%E6%88%90%E6%95%B0%E5%AD%97%E5%86%9C%E4%B8%9A%E4%BA%A7%E4%B8%9A%E5%9B%AD%E5%9B%BE%E7%89%87%20%285%29.png'
];

// 预加载图片函数
const preloadImages = () => {
  imageUrls.forEach((url, index) => {
    const img = new Image();
    img.src = url;
    const altText = index === 0 ? '数字农业产业园图片6' : '数字农业产业园图片5';
    img.onload = () => {
      console.log(`图片预加载成功: ${altText}`);
    };
    img.onerror = (error) => {
      console.error(`图片预加载失败: ${altText}`, error);
    };
  });
};

// 在组件挂载前预加载图片
onMounted(() => {
  preloadImages();
});
</script>

<style scoped>
.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.left-image {
  width: 500px; /* 根据需要调整图片宽度 */
  margin-right: 20px; /* 图片与文本之间的间距 */
  margin-bottom: 40px;
}

#app {
  padding: 20px; /* 页面内边距 */
}

.content p {
  line-height: 1.6;
}
</style>
